<!--edu_2_2_2.html-->
<!--<!doctype html>-->
<!--<html lang="en">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<meta name="viewport"-->
          <!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
    <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <!--<title>中国教育和科研计算机网CERNET</title>-->
    <!--<meta content = "IE = EmulateIE7"http-equiv = "X - UA - Compatible">-->
    <!--<meta name = "keywords" content = "中国教育网，中国教育，科研发展，教育信息化，CERNET，CERNET2，下一代互联网，人才，人才服务，教师招聘，教育资源，教育服务，教育博客，教育黄页，教育新闻，教育资讯">-->
    <!--<meta name = "description" content = "中国教育网(中国教育和科研计算机网)是中国最权威的教育门户网站，是了解中国教育的对内、对外窗口。网站提供关于中国教育、科研发展、教育信息化、CERNET等新闻动态、最新政策，并提供教师招聘、高考信息、考研信息、教育资源、教育博客、教育黄页等全面多样的教育服务。">-->
    <!--<meta name = "copyright" content = "www.edu.cn">-->
    <!--<meta content = "all" name = "robots">-->
    <!--<style  type="text/css">-->
        <!--div{background: #99cccc;width: 500px;height: 150px;}-->
    <!--</style>-->
<!--</head>-->
<!--<body text="rgb(0,0,0)" bgcolor="# f0f0f0" background="" link="rgb(0%,100%,0%)" alink="white" vlink="red" margintop="60px" marginleft="60px">-->
    <!--<div id="" class="">-->
        <!--<p>欢迎访问我们的站点，我们为您提供网站地图。</p>-->
        <!--网站导航：-->
        <!--<a href="http://www.baidu.com">百度</a>-->
        <!--<a href="http://www.163.com">网易</a>-->
        <!--<a href="http://www.sina.com">新浪</a>-->
        <!--<a href="http://www.sohu.com">搜狐</a>-->
    <!--</div>-->
    <!--<h3><i>这是正确嵌套不交叉的代码</i></h3>-->
<!--</body>-->
<!--</html>-->

<!--<!doctype html>-->
<!--<html lang="en">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<meta name="viewport"-->
          <!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
    <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <!--<title>标记语法及属性语法应用</title>-->
    <!--<style type = "text/css">-->
        <!--div{text-align: center;}-->
    <!--</style>-->
<!--</head>-->
<!--<body bgcolor="# CDEBE6">-->
    <!--<h3 align="center">欢度新年元旦</h3>-->
    <!--<hr size="2" color="red" width="100%"/>-->
    <!--<p align="left">&nbsp;&nbsp;&nbsp;&nbsp;元旦(New Year's Day,New year)，指一年开始的第一天，也被称为“新历年”、“阳历年”，在古代指阴历的正月初一。1949年9月27日，中国政治协商会议第一届全体会议正式确立公历1月1日为元旦。元旦是世界上很多国家和地区的法定假日。</p>-->
    <!--<div id="" class="">-->
        <!--<img src="yuandan1.jpg" width="300" height="165">-->
        <!--<img src="yuandan2.jpg" width="300" height="165">-->
    <!--</div>-->
    <!--<hr size="2" color="red" width="100 %" />-->
    <!--<p align="center">Web前端开发技术工作室 Copyright &copy; 2014-2016 </p>-->
<!--</body>-->
<!--</html>-->


<!--<!doctype html>-->
<!--<html lang="en">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<meta name="viewport"-->
          <!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
    <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <!--<title>文本修饰标记应用</title>-->
<!--</head>-->
<!--<body>-->
    <!--<center>-->
        <!--<h3 align="center">文本修饰标记应用</h3>-->
        <!--<hr size="2"color="red"/>-->
        <!--<comment>文本修饰标记应用</comment><br>-->
        <!--<b>软件工程专业全国就业最好！</b><br>-->
        <!--<i>软件工程专业全国就业最好！</i><br>-->
        <!--<u>软件工程专业全国就业最好！</u><br>-->
        <!--<del>软件工程专业全国就业最好！</del><br>-->
        <!--X<sup>2</sup>+2X+5=0<br>-->
        <!--X<sub>1</sub>=2<br>-->
        <!--<small>软件工程专业全国就业最好！</small><br>-->
        <!--<big>软件工程专业全国就业最好！</big><br>-->
        <!--<strong>软件工程专业全国就业最好！</strong><br>-->
        <!--<em>软件工程专业全国就业最好！</em><br>-->
    <!--</center>-->
<!--</body>-->
<!--</html>-->


<!--<!doctype html>-->
<!--<html lang="en">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<meta name="viewport"-->
          <!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
    <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <!--<title>计算机输出标记应用</title>-->
<!--</head>-->
<!--<body>-->
    <!--<center>-->
        <!--<comment>计算机输出标记应用</comment>-->
        <!--<h5>计算机输出标记应用</h5>-->
        <!--<hr size="2" color="blue">-->
        <!--<code>Computer code</code><br />-->
        <!--<kbd>Keyboard input</kbd><br />-->
        <!--<tt>Teletype text</tt><br />-->
        <!--<samp>Sample y=text</samp><br />-->
        <!--<p>-->
            <!--<b>注释：</b>这些标签常用于显示计算机/编程代码-->
        <!--</p>-->
        <!--<hr size="2" color="blue">-->
    <!--</center>-->
<!--</body>-->
<!--</html>-->


<!--<!doctype html>-->
<!--<html lang="en">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<meta name="viewport"-->
          <!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
    <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <!--<title>引用、术语标记应用</title>-->
<!--</head>-->
<!--<body>-->
    <!--<comment>引用、术语标记应用</comment>-->
    <!--<h5>引用、术语标记应用</h5>-->
    <!--<hr size="2" color="blue">-->
    <!--这是缩写：The <abbr title="People's a Republic of China">PRC</abbr> was founded 1949.-->
    <!--<address>-->
        <!--地址：Written by <a href="mailto:webmaster@example.com">Donald Duck</a><br>-->
        <!--Visit us at: <br>-->
        <!--Example.com <br>-->
        <!--Box 564,Disneyland <br>-->
        <!--USA-->
    <!--</address>-->
    <!--<h4>这里是长的引用请注意，浏览器在blockquote元素前后添加了换行，并增加了外边距。：</h4>-->
    <!--<blockquote>-->
        <!--This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.-->
    <!--</blockquote>-->
    <!--<cite>引用、引证</cite>-->
    <!--<h4>请注意，浏览器在引用的周围插入了引号。</h4>-->
    <!--<p>Here comes a short quotation:<q>This is a short quotation</q></p>-->
    <!--<dfn>定义项目</dfn>-->
<!--</body>-->
<!--</html>-->


<!--<!doctype html>-->
<!--<html lang="zh">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<meta name="viewport"-->
          <!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
    <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <!--<title>可口可乐</title>-->
<!--</head>-->
<!--<body text="#8b4513">-->
    <!--<h2 align="left">一路可口可乐</h2>-->
    <!--<img src="http://www.coca-cola.com.cn/content/dam/journey/cn/zh/private/culture/2018030700.jpg" width="400"height="400">-->
    <!--<ul>-->
        <!--<ul>-->
            <!--<li><img src="http://www.coca-cola.com.cn/content/dam/journey/cn/zh/private/brand/sprite/sprite-logo%20122x60px.rendition.120.60.png"width="70"height="50"></li>-->
            <!--<li></li>-->
            <!--<li></li>-->
        <!--</ul>-->
    <!--</ul>-->
<!--</body>-->
<!--</html>-->

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .inline_div{display: inline}
        #wrap{width: 400px;height: 250px;border: 2px solid black}
        #d1,#d2{
            height: 100px;
            width: 40%;
            background-color: green;
            margin: 20px;
        }
        #d2{border-color: yellow;}
        #d3{
            height: 100px;
            width: 90%;
            border: 2px solid black;
            background-color: #66ff33;
            margin: 0 auto;
        }

        h3{font-size: 28px;color: #0033ff}
    </style>
</head>
<body>
<h3>这是图层嵌套的应用</h3>
<div id="wrap">
    <div id="d1" class="inline_div">div1</div>
    <div id="d2" class="inline_div">div2</div>
    <div id="d3">div3</div>
</div>

</body>
</html>